<template>
    <div class="new-ac-img" id="ThumdImg">
        <ul>
            <li v-for="item in items">
                <a :href="item.url">
                    <img :src="item.src" :alt="item.alt">
                    <span v-text="item.title"></span>
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
    import Img from '../assets/new-ac-img.jpg'
    export default {
        name: 'ThumdImg',
        data (){
            return {
                items:[{
                    'src': Img,
                    'url': 'index.html',
                    'title': '青年创业者登山',
                    'alt': "图片alt内容"
                },{
                    'src': Img,
                    'url': 'index.html',
                    'title': '青年创业者登山',
                    'alt': "图片alt内容"
                },{
                    'src': Img,
                    'url': 'index.html',
                    'title': '青年创业者登山',
                    'alt': "图片alt内容"
                }]
            }
        }
    }
</script>

<style>
    #ThumdImg ul{height:11rem;width:100%;}
    #ThumdImg ul li{height:10rem;width:32%;float:left;padding:0.5rem 0;}
    #ThumdImg ul li:nth-child(1),#ThumdImg ul li:nth-child(2){margin-right:2%;}
    #ThumdImg ul li:nth-child(1),#ThumdImg ul li:nth-child(2){margin-right:2%;}
    #ThumdImg ul li img{height:10rem;width:100%;}
    #ThumdImg ul li a,#ThumdImg ul li a{height:10rem;width:100%;display: block;position: relative;}
    #ThumdImg ul li a span,#ThumdImg ul li a span{height:2rem;width:100%;font-size: 1.2rem;background:#000000;opacity: 0.65;position: absolute;z-index: 99;text-align: center;line-height:2rem;color:#fff;left: 0;top:8rem;}
</style>